<div id="maincolumn">

<style>
	.ui-autocomplete 
	{
		max-height: 300px;
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 20px;
		font-size:12px;
	}
	#main_body td
	{
		font-size:14px;
	}
</style>
<link rel="stylesheet" href="../app_themes/chosen/chosen.css" />

{literal}
<script type="text/javascript" src="../app_themes/jquery/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../app_themes/jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../app_themes/jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../app_themes/jquery/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../app_themes/jquery/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../app_themes/jquery/ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../app_themes/chosen/chosen.jquery.js" ></script>

<script type="text/javascript">
$(function()
{
	$("#odate").datepicker
	({
		
	});	
	
	$("#cdate").datepicker
	({
		
	});	
	
	$(".fancy").chosen(); 
	$(".fancy-deselect").chosen({allow_single_deselect:true});					  
});
</script>
{/literal}


<table class="signupcontent">
	<tr>
		<td class="signupHeading" width="100%">
			Create an Account
      	</td>
	</tr>
</table>

<form method="post" action="index.php">

{if $success != ''}<font color="blue"><strong>{$success}</strong></font><br />{/if}
				
				<!-- Table makes sure form labels and fields line up nicely. -->
				<table>
					<tr>
						<td align="right">Username: </td>
						<td><input type="text" name="username" style="width:250;" required="true" x-moz-errormessage="Please enter a username."></td>
					</tr>
					<tr>
						<td align="right">E-mail: </td>
						<td><input type="text" name="email" size="40%" required="true" pattern="{$emailREX}" 
            	x-moz-errormessage="Please enter a valid email address." value=""/></td>
					</tr>
					<tr>
						<td align="right">Name Prefix </td>
						<td><input type="text" name="prefix" style="width:250;"></td>
					</tr>
					<tr>
						<td align="right">First Name: </td>
						<td><input type="text" name="firstname" style="width:250;" required="true" x-moz-errormessage="Please enter your first name."></td>
					</tr>
					<tr>
						<td align="right">Last Name: </td>
						<td><input type="text" name="lastname" style="width:250;" required="true" x-moz-errormessage="Please enter your last name."></td>
					</tr>
					<tr>
						<td align="right">Name Suffix </td>
						<td><input type="text" name="suffix" style="width:250;"></td>
					</tr>

					<tr>
						<td align="right">Address Number: </td>
						<td><input type="text" name="address_num" style="width:250;" required="true" x-moz-errormessage="Please enter your address."></td>
					</tr>
					<tr>
						<td align="right">Address Street Name: </td>
						<td><input type="text" name="address_st_name" style="width:250;" required="true" x-moz-errormessage="Please enter your address."></td>
					</tr>

					<tr>
						<td align="right">City: </td>
						<td><input type="text" name="city" style="width:250;" required="true" x-moz-errormessage="Please enter your city."></td>
					</tr>
					<tr>
						<td align="right">State: </td>
						<td><select name='state' data-placeholder="Choose a State..." class="fancy" style="width:175px;" required="true">
          		<option value=""></option> 
                {foreach from=$states key=k item=v name='sList'}<option value="{$k}">{$v}</option>
                {/foreach}
            </select></td>
					</tr>
					<tr>
						<td align="right">Zip Code: </td>
						<td><input name="zip" type="text" required="true" pattern="{$zipREX}" 
            	size="10" maxlength="10" x-moz-errormessage="Please enter a valid zip-code" value="" /></td>
					</tr>
					<tr>
						<td align="right">Gender: </td>
						<td><select name="gender" size="1" style="width: 125px">
							<option value="Male">Male</option>
							<option value="Female">Female</option></select>
						</td>
					</tr>
					<tr>
						<td align="right">Home Phone: </td>
						<td><input type="text" name="phone_home" size="40%" required="true" 
        	pattern="{$phoneREX}" x-moz-errormessage="Please enter a valid phone number." value=""/></td>
					</tr>
					<tr>
						<td align="right">Password: </td>
						<td><input type="password" name="newpass" required="true"></td>
					</tr>
					<tr>
						<td align="right">Confirm Password: </td>
						<td><input type="password" name="confirmnewpass" required="true"></td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>   <input id="Submit1" name="bt_submit1" type="submit" value="Submit" >
    						   <input id="Reset1" type="reset" value="Reset" >
    					</td>
					</tr>
				</table>
				</form>
</div>